import React, { Component } from 'react';
import { message, Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { loginRequest } from '../../api/index';
import './login.css';
import logo from '../../assets/images/logo192.jpg';
import memoryUtils from '../../utils/memoryUtils';
import { saveUser, getUser, removeUser } from '../../utils/storageUtils';

export default class login extends Component {
  // onFinishFailed = (errorInfo) => {
  //   console.log('Failed:', errorInfo);
  // };

  // onFinish = (values) => {
  //   console.log(values);
  // };

  handleSubmit = () => {
    //console.log(this.formRef.getFieldValue());
    this.formRef.validateFields().then(
      async (success) => {
        const { username, password, remember } = this.formRef.getFieldValue();
        const result = await loginRequest(username, password);
        if (result.status === 1) {
          message.error(result.msg);
        } else {
          message.success(`Welcome! ${result.data.username}`);
          const user = {
            id: result.data._id,
            username: username,
            password: password,
          };
          if (remember) {
            saveUser(user);
          } else {
            removeUser();
          }
          memoryUtils.user = user;
          this.props.history.push('/');
        }
      },
      (error) => {
        message.error('您输入的用户名或者密码不合法！');
        console.log(error);
      }
    );
  };

  render() {
    const { username, password } = getUser();
    return (
      <div className="login-interface">
        <div className="login-header">
          <img className="header-logo" src={logo} alt="logo" />
          <div className="header-text">React后台管理系统</div>
        </div>
        <div className="login-body">
          <div className="login-form-div">
            <div className="login-form-header">用户登录</div>
            <Form
              name="normal_login"
              className="login-form"
              ref={(values) => (this.formRef = values)}
              initialValues={{
                remember: false,
                username: username,
                password: password,
              }}
            >
              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Username!',
                  },
                  {
                    max: 12,
                  },
                  {
                    min: 3,
                  },
                  {
                    pattern: /^[a-zA-Z0-9_]+$/,
                    message: 'The user name must consist of English characters',
                  },
                  {
                    whitespace: true,
                  },
                ]}
              >
                <Input
                  className="login-form-input"
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="Username"
                />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Username!',
                  },
                  {
                    max: 12,
                  },
                  {
                    min: 3,
                  },
                  {
                    pattern: /^[a-zA-Z0-9_]+$/,
                    message: 'The user name must consist of English characters',
                  },
                  {
                    whitespace: true,
                  },
                ]}
              >
                <Input
                  className="login-form-input"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Password"
                />
              </Form.Item>
              <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox className="login-form-check">Remember me</Checkbox>
                </Form.Item>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                  onClick={this.handleSubmit}
                >
                  Log in
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}
